<template>
    <a-form :form="form" layout="vertical" class="rx-a-form-vertical">
        <a-form-item :label="i18n('form.showField','显示文本字段')">
            <a-radio-group v-decorator="['showPath']">
                <a-radio v-for="(obj,index) in groupList" :value="obj.value">
                    {{ obj.label }}
                </a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item :label="i18n('form.backgroundType','背景类型')">
            <a-radio-group v-decorator="['backgroundType']">
                <a-radio v-for="(obj,index) in backgroundType" @click="radioType" :value="obj.value">
                    {{ obj.label }}
                </a-radio>
            </a-radio-group>
        </a-form-item>
        <a-form-item v-if="mdl.backgroundType!='no'" :label="i18n('form.backgroundColor','背景颜色')">
            <div class="user-back" v-if="mdl.backgroundType=='system'">
                <div v-for="(itme,index) in backgroundList" v-decorator="['background']" :key="index"
                     :style="{'background':itme}"
                     @click="backgroundClick(itme)" class="user-back-common">
                    <my-icon v-if="mdl.background==itme" type="icondui"></my-icon>
                </div>
            </div>
            <div v-else>
                <a-input style="width: 100px" v-model="mdl.background" v-decorator="['background']" type="color"/>
            </div>
        </a-form-item>
        <a-form-item v-if="mdl.backgroundType!='no'" :label="i18n('form.defaultIcon','默认图标')">
            <div class="user-icon" :style="{'background':mdl.background}">
                <my-icon type="iconuserGroup2"></my-icon>
            </div>
        </a-form-item>
        <a-form-item label="Tooltip提示文本">
            <a-checkbox-group v-decorator="['tooltip']">
                <a-checkbox v-for="obj in tooltipList" :value="obj.value">
                    {{ obj.label }}
                </a-checkbox>
            </a-checkbox-group>
        </a-form-item>
    </a-form>
</template>

<script>
export default {
    name: "renderConfig_group",
    props:["layerid","destroy"],
    data(){
        return {
            form: this.$form.createForm(this),
            mdl:{},
            groupList:[
                {value: 'department', label: this.i18n('form.departmentName', '部门名称')},
                {value: 'departmentId', label: this.i18n('form.departmentName', '部门名称')+'(ID)'},
                {value: 'departmentWhole', label: this.i18n('form.fullPathName', '部门全路径名')},
            ],
            backgroundType: [{
                value: 'system',
                label: this.i18n('form.system', '系统'),
            }, {
                value: 'custom',
                label: this.i18n('form.custom', '自定义')
            },{
                value: 'no',
                label: this.i18n('form.no', '无')
            }],
            backgroundList: ['#1890FF', '#4285F4', '#2A48FF', '#01DE96', '#0FC6C2', '#7BC616', '#00B42A', '#EB0AA4', '#B71DE8', '#7816FF', '#FFB400', '#FF7D00', '#FF794F', '#F53F3F'],
            tooltipList: [
                {value: 'department', label: this.i18n('form.departmentName', '部门名称')},
                {value: 'departmentId', label: this.i18n('form.departmentName', '部门名称')+'(ID)'},
                {value: 'departmentWhole', label: this.i18n('form.fullPathName', '部门全路径名')},
            ]

        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formCellRender",key);
        },
        setData(data,fieldDts){
            data.showPath =!data.showPath?'department':data.showPath;
            data.backgroundType =!data.backgroundType?'system':data.backgroundType;
            data.background =!data.background?'#4285F4':data.background
            this.mdl=data;
            this.form.setFieldsValue(this.mdl);
        },
        validate(callback){
            var self=this;
            this.form.validateFields((err, values) => {
                if(err){
                    return;
                }
                self.mdl=values;
                callback();
            });
        },
        getData(){
            return this.mdl;
        },
        radioType(e) {
            this.mdl.backgroundType = e.target.value
        },
        backgroundClick(e) {
            this.mdl.background = e;
            this.form.setFieldsValue(this.mdl);
        },
    }
}
</script>

<style scoped>
.user-back {
    display: flex;
    width: 100%;
    cursor: pointer;
}

.user-back-common i {
    color: white;
}

.user-back-common {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 31px;
}
.user-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #4285F4;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 26px;
}
</style>